<template>
    <!-- 活动表单信息控件 -->
    <el-card shadow="never" class="detail-content">
        <div class="content">
            <el-scrollbar id="activityInfoForm" ref="activityScrollBarRef" class="activity-info-form">
                <activityForm ref="activityFormRef" v-model="formParams"></activityForm>
            </el-scrollbar>
            <div class="activity-phone">
                <activityPhone v-model="formParams" v-model:phone-preview-index="phonePreviewIndex" />
            </div>
        </div>
    </el-card>
    <!-- 控制步骤的按钮 -->
    <div class="detail-footer">
        <el-button plain @click="onCancel">{{ route.query.type == 'look' ? '返回' : '取消' }}</el-button>
        <el-button v-if="route.query.type != 'look'" type="primary" @click="onSave">保存</el-button>
    </div>
</template>
<script setup lang="ts">
import activityForm from './components/activityForm.vue';
import activityPhone from './components/activityPhone.vue';

import { ref, reactive, markRaw, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { ElMessage, ElMessageBox } from 'element-plus';
import { WarningFilled } from '@element-plus/icons-vue';
import { IFormParams } from './interface';
import { cloneDeep } from 'lodash';

import { shuntCodeCreate, shuntCodeEdit, shuntCodeView } from '@/api/smartMarketing/drainage/shuntCode';

const route = useRoute();
const router = useRouter();

const activityFormRef = ref<any>(null);

const phonePreviewIndex = ref(0);

const defaultFormParams: IFormParams = {
    activity_name: '',
    period_type: 1,
    activity_time: [],
    description: '',
    group: [
        {
            name: '分组1',
            channel_id: ''
        }
    ]
};

const formParams = reactive<IFormParams>(defaultFormParams);

const onCheck = async () => {
    const text = `确定要修改此活动信息吗？修改后历史数据不会变更，新产生的数据将按照新规则执行`;
    await ElMessageBox.confirm(text, '提示', {
        customClass: 'community-checkin-msg-box-confirm',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        icon: markRaw(WarningFilled)
    });
    return;
};

/**
 * 取消
 */
const onCancel = async () => {
    const type = route.query.type;
    const text = type === 'edit' ? '编辑' : '新建';
    ['new', 'edit'].includes(type) &&
        (await ElMessageBox.confirm(`确定要放弃${text}此活动吗？`, '提示', {
            customClass: 'community-checkin-msg-box-confirm',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            icon: markRaw(WarningFilled)
        }));
    router.back();
};

/**
 * 保存
 */
const onSave = async () => {
    if (!(await activityFormRef.value.validate())) return;

    if (route.query.type == 'edit') {
        await onCheck();
    }
    const params = cloneDeep(formParams);
    // console.log(params, 'params');
    if (route.query.type == 'new') {
        onNewSave(params);
        return;
    }
    if (route.query.type == 'edit') {
        onEditSave(params);
        return;
    }
};

/**
 * 新建
 */
const onNewSave = async val => {
    await shuntCodeCreate(val);
    ElMessage.success('创建成功');
    router.back();
};

/**
 * 编辑
 */

const onEditSave = async val => {
    await shuntCodeEdit(val);
    ElMessage.success('编辑成功');
    router.back();
};

/**
 * 详情
 */
const onLookDetail = async () => {
    const params = { id: route.query.id };
    const res = await shuntCodeView(params);
    activityFormRef.value.setGroupList(res?.group || []);
    Object.assign(formParams, res);
};

onMounted(() => {
    const type = route.query.type;
    ['look', 'edit'].includes(type) && onLookDetail();
});
</script>
<style lang="scss" scoped>
.detail-content {
    height: calc(100vh - 207px);
    margin-bottom: 16px;

    :deep(.el-card__body) {
        height: 100%;
        padding: 0;
    }

    .content {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        height: 100%;
    }

    .activity-info-form {
        overflow-y: auto;
        width: 70%;
        min-width: 620px;
    }

    .activity-phone {
        display: flex;
        overflow: auto;
        align-items: flex-start;
        flex: 1;
        justify-content: center;
        box-sizing: border-box;
        min-width: 420px;
        border-left: 1px solid #eaeaea;
    }
}

.detail-footer {
    text-align: center;
    margin: 0 -16px -16px;
    padding: 16px 24px;
    border-radius: 0;
    border: none;
    border-top: 1px solid #e4e7ed;
    background-color: #fff;
}
</style>
<style lang="scss">
.community-checkin-msg-box-confirm {
    width: 400px;

    .el-message-box__content {
        padding: 0;
    }

    .el-message-box__container {
        margin: 42px 25px 44px;
        display: flex;
        justify-content: center;

        // align-items: center;
        .el-icon {
            position: relative;
            top: 0;
            transform: translateY(0);

            --el-messagebox-color: #faad14;
        }
    }

    .el-message-box__message {
        padding: 0 0 0 8px;
    }

    .el-button--primary {
        background-color: var(--el-button-bg-color) !important;
    }
}
</style>
